import Link from "next/link"

type NewsItemProps = {
    title: string
    description: string
    date: Date
    source: string
    thumbnail: string
}

const NewsItem = ({ title, description, date, source, thumbnail }: NewsItemProps) => {
    const formatDate = (date: Date): string => {
        const year = date.getFullYear();
        const month = (date.getMonth()).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    return (
        <Link href='#' className="w-full flex space-x-1 border hover:shadow hover:border-primary/35">
            <div
                className="bg-cover bg-center h-[80px] w-[120px] md:h-[114px] md:w-[172px]"
                style={{ backgroundImage: `url(${thumbnail})` }}
            />
            <div className="flex-1 flex flex-col px-2 py-1">
                <div className="flex-1 flex flex-col items-start space-y-1">
                    <h3 className="text-sm md:text-md font-semibold line-clamp-1">{title}</h3>
                    <p className="text-xs md:text-sm text-muted-foreground line-clamp-1 md:line-clamp-2">{description}</p>
                </div>
                <div className="flex justify-between text-[10px] md:text-[12px] text-muted-foreground">
                    <p>{source}</p>
                    <p>{formatDate(date)}</p>
                </div>
            </div>
        </Link>
    )
}

export default NewsItem